<template>
  <div class="portal-container">
    <div class="portal-background"></div>
    <div class="portal-content">
      <!-- 头部标题和徽标 -->
      <header class="portal-header">
        <div class="logo-container">
          <div class="logo-icon">
            <svg viewBox="0 0 24 24" class="bridge-icon" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 12H18M6 12V16C6 17.1046 5.10457 18 4 18H2M6 12V8M18 12V16C18 17.1046 18.8954 18 20 18H22M18 12V8M6 8H18M6 8C6 6.89543 5.10457 6 4 6H2M18 8C18 6.89543 18.8954 6 20 6H22" 
                stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
        </div>
        <h1 class="portal-title">舟山大桥统一门户系统</h1>
        <p class="portal-subtitle">请选择要访问的业务平台</p>
      </header>

      <!-- 平台卡片容器 -->
      <div class="platform-cards">
        <!-- 综合管理平台卡片 -->
        <div 
          class="platform-card integrated"
          :class="{ 'is-loading': loading.integrated }"
          @click="navigateTo('integrated')"
        >
          <div class="card-content">
            <div class="card-icon">
              <el-icon><Platform /></el-icon>
              <div class="icon-glow"></div>
            </div>
            <div class="card-info">
              <h2 class="card-title">综合管理平台</h2>
              <p class="card-description">包含日常运营、设备监控、人员管理等综合功能</p>
            </div>
            <div class="card-action">
              <el-button
                type="primary"
                class="entry-button"
                :loading="loading.integrated"
                @click.stop="navigateTo('integrated')"
              >
                立即进入
                <template #loading>
                  <span class="loading-text">跳转中...</span>
                </template>
              </el-button>
            </div>
            <div class="card-decoration">
              <svg class="deco-1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M39.9,-65.7C51.1,-59.6,59.5,-47.8,66.1,-35C72.7,-22.1,77.7,-8.2,76.4,5.1C75,18.4,67.4,31.1,58,41.6C48.7,52.1,37.6,60.4,25.1,65.5C12.7,70.5,-1.1,72.3,-14.9,70.1C-28.8,67.9,-42.7,61.8,-53.2,51.5C-63.8,41.3,-70.9,26.9,-73.4,11.7C-75.9,-3.5,-73.7,-19.4,-66.7,-32.2C-59.6,-45,-47.7,-54.7,-35.2,-60.2C-22.6,-65.7,-9.3,-67,-1.8,-64.4C5.7,-61.8,13.4,-55.3,25.5,-51.2C37.5,-47,49.9,-45.3,59.1,-38.9C68.3,-32.6,74.3,-21.7,75.4,-10.3C76.6,1.1,72.9,12.9,67.3,23.4C61.7,33.9,54.1,43.1,44,48.4C33.9,53.7,21.3,55.2,8.7,58.1C-3.9,61,-16.5,65.4,-28.1,64.4C-39.8,63.4,-50.4,57,-59.5,48C-68.6,39,-76.1,27.5,-79.1,14.9C-82.1,2.3,-80.6,-11.4,-75.1,-23C-69.6,-34.6,-60.1,-44.1,-48.8,-49.7C-37.5,-55.4,-24.4,-57.2,-11.8,-59.6C0.8,-62,13,-65,24.6,-65.1C36.2,-65.2,47.3,-62.4,52.9,-55.6C58.5,-48.8,58.8,-38,59.8,-27.6C60.8,-17.2,62.5,-7.1,65,4.6C67.5,16.3,70.7,29.5,67.3,40.2C63.8,50.9,53.6,59.1,42,63.7C30.4,68.3,17.6,69.4,4.3,71.3C-8.9,73.2,-22.7,75.9,-34.8,72.2C-46.9,68.5,-57.4,58.5,-64.3,46.4C-71.2,34.3,-74.7,20.1,-75,6.3C-75.4,-7.6,-72.7,-21,-66.2,-32C-59.7,-43,-49.4,-51.5,-38.1,-58.1C-26.9,-64.7,-14.7,-69.3,-0.9,-70.5C12.9,-71.7,28.7,-69.5,39.9,-65.7Z" transform="translate(100 100)" />
              </svg>
              <svg class="deco-2" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M44.2,-76.3C58.3,-69.9,71.8,-60.1,79.2,-46.6C86.6,-33.1,88,-15.8,85.9,-0.1C83.8,15.6,78.3,31.1,69.7,45C61.2,58.8,49.5,71,35.6,76.3C21.7,81.6,5.6,80.1,-10.1,77.3C-25.8,74.6,-41.1,70.5,-53.3,62C-65.5,53.4,-74.5,40.3,-79.2,25.8C-83.8,11.4,-84,-4.4,-79.8,-18.8C-75.6,-33.2,-67,-46.2,-54.9,-52.8C-42.9,-59.4,-27.6,-59.6,-12.9,-65.9C1.7,-72.2,16.8,-84.5,30.1,-82.7C43.4,-80.9,55,-82.8,44.2,-76.3Z" transform="translate(100 100)" />
              </svg>
            </div>
          </div>
          <div class="card-ripple"></div>
        </div>

        <!-- 健康管理平台卡片 -->
        <div 
          class="platform-card health" 
          :class="{ 'is-loading': loading.health }"
          @click="navigateTo('health')"
        >
          <div class="card-content">
            <div class="card-icon">
              <el-icon><Monitor /></el-icon>
              <div class="icon-glow"></div>
            </div>
            <div class="card-info">
              <h2 class="card-title">大桥健康管理平台</h2>
              <p class="card-description">实时监测桥梁结构健康状态，提供专业分析报告</p>
            </div>
            <div class="card-action">
              <el-button
                type="success"
                class="entry-button"
                :loading="loading.health"
                @click.stop="navigateTo('health')"
              >
                立即进入
                <template #loading>
                  <span class="loading-text">跳转中...</span>
                </template>
              </el-button>
            </div>
            <div class="card-decoration">
              <svg class="deco-1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M39.9,-65.7C51.1,-59.6,59.5,-47.8,66.1,-35C72.7,-22.1,77.7,-8.2,76.4,5.1C75,18.4,67.4,31.1,58,41.6C48.7,52.1,37.6,60.4,25.1,65.5C12.7,70.5,-1.1,72.3,-14.9,70.1C-28.8,67.9,-42.7,61.8,-53.2,51.5C-63.8,41.3,-70.9,26.9,-73.4,11.7C-75.9,-3.5,-73.7,-19.4,-66.7,-32.2C-59.6,-45,-47.7,-54.7,-35.2,-60.2C-22.6,-65.7,-9.3,-67,-1.8,-64.4C5.7,-61.8,13.4,-55.3,25.5,-51.2C37.5,-47,49.9,-45.3,59.1,-38.9C68.3,-32.6,74.3,-21.7,75.4,-10.3C76.6,1.1,72.9,12.9,67.3,23.4C61.7,33.9,54.1,43.1,44,48.4C33.9,53.7,21.3,55.2,8.7,58.1C-3.9,61,-16.5,65.4,-28.1,64.4C-39.8,63.4,-50.4,57,-59.5,48C-68.6,39,-76.1,27.5,-79.1,14.9C-82.1,2.3,-80.6,-11.4,-75.1,-23C-69.6,-34.6,-60.1,-44.1,-48.8,-49.7C-37.5,-55.4,-24.4,-57.2,-11.8,-59.6C0.8,-62,13,-65,24.6,-65.1C36.2,-65.2,47.3,-62.4,52.9,-55.6C58.5,-48.8,58.8,-38,59.8,-27.6C60.8,-17.2,62.5,-7.1,65,4.6C67.5,16.3,70.7,29.5,67.3,40.2C63.8,50.9,53.6,59.1,42,63.7C30.4,68.3,17.6,69.4,4.3,71.3C-8.9,73.2,-22.7,75.9,-34.8,72.2C-46.9,68.5,-57.4,58.5,-64.3,46.4C-71.2,34.3,-74.7,20.1,-75,6.3C-75.4,-7.6,-72.7,-21,-66.2,-32C-59.7,-43,-49.4,-51.5,-38.1,-58.1C-26.9,-64.7,-14.7,-69.3,-0.9,-70.5C12.9,-71.7,28.7,-69.5,39.9,-65.7Z" transform="translate(100 100)" />
              </svg>
              <svg class="deco-2" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M44.2,-76.3C58.3,-69.9,71.8,-60.1,79.2,-46.6C86.6,-33.1,88,-15.8,85.9,-0.1C83.8,15.6,78.3,31.1,69.7,45C61.2,58.8,49.5,71,35.6,76.3C21.7,81.6,5.6,80.1,-10.1,77.3C-25.8,74.6,-41.1,70.5,-53.3,62C-65.5,53.4,-74.5,40.3,-79.2,25.8C-83.8,11.4,-84,-4.4,-79.8,-18.8C-75.6,-33.2,-67,-46.2,-54.9,-52.8C-42.9,-59.4,-27.6,-59.6,-12.9,-65.9C1.7,-72.2,16.8,-84.5,30.1,-82.7C43.4,-80.9,55,-82.8,44.2,-76.3Z" transform="translate(100 100)" />
              </svg>
            </div>
          </div>
          <div class="card-ripple"></div>
        </div>
      </div>

      <!-- 动态波浪效果 -->
      <div class="wave-container">
        <div class="wave wave1"></div>
        <div class="wave wave2"></div>
      </div>

      <!-- 底部提示 -->
      <footer class="portal-footer">
        <p>遇到访问问题？请联系技术支持：<a href="tel:0570XXXXXXX" class="support-link">0570-XXXXXXX</a></p>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Platform, Monitor } from '@element-plus/icons-vue'
import { useMouseInElement } from '@vueuse/core'

type PlatformType = 'integrated' | 'health'

const router = useRouter()
const loading = ref({
  integrated: false,
  health: false
})

// 添加卡片点击时的涟漪效果
const handleCardRipple = (event: MouseEvent, element: HTMLElement) => {
  const x = event.offsetX
  const y = event.offsetY
  
  const rippleElement = element.querySelector('.card-ripple') as HTMLElement
  if (rippleElement) {
    rippleElement.style.left = `${x}px`
    rippleElement.style.top = `${y}px`
    rippleElement.classList.add('active')
    
    setTimeout(() => {
      rippleElement.classList.remove('active')
    }, 600)
  }
}

const navigateTo = async (platform: PlatformType, event?: MouseEvent) => {
  if (loading.value[platform]) return
  
  try {
    // 添加点击涟漪效果
    if (event) {
      const card = (event.currentTarget as HTMLElement)
      handleCardRipple(event, card)
    }
    
    loading.value[platform] = true
    
    // 模拟异步跳转
    await new Promise(resolve => setTimeout(resolve, 800))
    
    router.push({
      name: platform === 'integrated' 
        ? 'IntegratedPlatform' 
        : 'HealthPlatform'
    })
  } finally {
    loading.value[platform] = false
  }
}

// 添加页面加载动画
onMounted(() => {
  document.body.classList.add('portal-loaded')
})
</script>

<style scoped>
/* 全局样式 */
.portal-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #2c3e50;
  padding: 1rem;
}

/* 背景样式 */
.portal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f6f9fc 0%, #e9f2f9 100%);
  z-index: -2;
}

.portal-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(#4299e1 0.5px, transparent 0.5px),
    radial-gradient(#4299e1 0.5px, transparent 0.5px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.05;
  z-index: -1;
}

/* 内容容器 */
.portal-content {
  max-width: 1000px;
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  animation: contentFadeIn 1s ease-out forwards;
}

/* 头部样式 */
.portal-header {
  text-align: center;
  position: relative;
  padding-bottom: 2rem;
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.logo-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3182ce 0%, #63b3ed 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
  position: relative;
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: float 6s ease-in-out infinite;
}

.logo-icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.4);
}

.bridge-icon {
  width: 50px;
  height: 50px;
  color: white;
}

.portal-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(to right, #2c5282, #3182ce);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  animation: titleFadeIn 0.8s ease-out forwards;
}

.portal-subtitle {
  font-size: 1.2rem;
  color: #4a5568;
  font-weight: 500;
  opacity: 0;
  animation: subtitleFadeIn 0.8s ease-out 0.4s forwards;
}

/* 平台卡片容器 */
.platform-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  width: 100%;
}

/* 卡片样式 */
.platform-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  transform: translateY(0);
  min-height: 320px;
}

.platform-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 1;
}

.platform-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.card-content {
  padding: 2.5rem 2rem;
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 卡片图标 */
.card-icon {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.platform-card:hover .card-icon {
  transform: scale(1.1) rotate(-5deg);
}

.platform-card.integrated .card-icon {
  background: linear-gradient(135deg, #3182ce 0%, #63b3ed 100%);
  box-shadow: 0 10px 20px -5px rgba(49, 130, 206, 0.4);
}

.platform-card.health .card-icon {
  background: linear-gradient(135deg, #38a169 0%, #68d391 100%);
  box-shadow: 0 10px 20px -5px rgba(56, 161, 105, 0.4);
}

.card-icon .el-icon {
  font-size: 2.5rem;
  color: white;
}

.icon-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.platform-card.integrated .icon-glow {
  background: rgba(49, 130, 206, 0.6);
}

.platform-card.health .icon-glow {
  background: rgba(56, 161, 105, 0.6);
}

.platform-card:hover .icon-glow {
  opacity: 0.6;
}

/* 卡片信息 */
.card-info {
  margin-bottom: 1.5rem;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #2d3748;
}

.card-description {
  font-size: 1rem;
  color: #718096;
  line-height: 1.6;
}

/* 卡片按钮 */
.entry-button {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.entry-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: left 0.5s ease;
}

.platform-card:hover .entry-button::after {
  left: 100%;
}

.loading-text {
  margin-left: 0.5rem;
}

/* 卡片装饰 */
.card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.deco-1, .deco-2 {
  position: absolute;
  opacity: 0.04;
  transform: scale(0.8);
  transition: all 0.6s ease;
}

.deco-1 {
  top: -40%;
  right: -40%;
  width: 80%;
  height: 80%;
}

.deco-2 {
  bottom: -30%;
  left: -30%;
  width: 70%;
  height: 70%;
}

.platform-card.integrated .deco-1,
.platform-card.integrated .deco-2 {
  color: #2b6cb0;
}

.platform-card.health .deco-1,
.platform-card.health .deco-2 {
  color: #2f855a;
}

.platform-card:hover .deco-1 {
  transform: scale(1) rotate(10deg);
  opacity: 0.06;
}

.platform-card:hover .deco-2 {
  transform: scale(1) rotate(-10deg);
  opacity: 0.06;
}

/* 点击涟漪效果 */
.card-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.card-ripple.active {
  animation: rippleEffect 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 波浪效果 */
.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
  z-index: -1;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z" fill="%233182ce" fill-opacity="0.05"/></svg>') repeat-x;
  background-size: 1440px 120px;
  animation: waveAnimation 20s linear infinite;
}

.wave1 {
  opacity: 0.3;
  animation-duration: 20s;
  animation-delay: 0s;
}

.wave2 {
  opacity: 0.2;
  animation-duration: 15s;
  animation-direction: reverse;
  animation-delay: -5s;
}

/* 底部提示 */
.portal-footer {
  text-align: center;
  margin-top: 2rem;
  color: #718096;
  font-size: 0.9rem;
}

.support-link {
  color: #4299e1;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.support-link:hover {
  color: #3182ce;
  text-decoration: underline;
}

/* 加载状态 */
.platform-card.is-loading {
  pointer-events: none;
}

/* 动画 */
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes rippleEffect {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(100);
    opacity: 0;
  }
}

@keyframes waveAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .portal-title {
    font-size: 2rem;
  }
  
  .platform-cards {
    grid-template-columns: 1fr;
  }
  
  .platform-card {
    min-height: 280px;
  }
  
  .card-icon {
    width: 60px;
    height: 60px;
  }
  
  .card-title {
    font-size: 1.3rem;
  }
}

/* 页面加载动画 */
:global(body):not(.portal-loaded) .portal-container {
  opacity: 0;
}

:global(body).portal-loaded .portal-container {
  opacity: 1;
  transition: opacity 0.5s ease;
}
</style>
